<template>
  <textarea
    ref="textareaRef"
    class="textarea"
    :class="{
      disabled,
      resizable,
    }"
    :disabled="disabled"
    :value="value"
    :rows="rows"
    :placeholder="placeholder"
    :style="{
      padding: padding ? `${padding}px` : '10px',
    }"
    @input="($event) => handleInput($event)"
    @focus="handleFocus"
    @blur="handleBlur"
  ></textarea>
</template>

<script  >
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
    rows: {
      type: Number,
      default: 4,
    },
    padding: {
      type: Number,
      default: undefined,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    resizable: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '',
    },
  },
  mounted() {
    // this.focus();
  },
  methods: {
    handleInput(event) {
      this.$emit('update:value', event.target.value);
    },
    focus() {
      if (this.$refs.textareaRef) {
        this.$refs.textareaRef.focus();
      }
    },
    handleFocus(event) {
      this.$emit('focus', event);
    },
    handleBlur(event) {
      this.$emit('blur', event);
    },
  },
};
// import { ref } from 'vue'

// withDefaults(defineProps<{
//   value: string
//   rows?: number
//   padding?: number
//   disabled?: boolean
//   resizable?: boolean
//   placeholder?: string
// }>(), {
//   rows: 4,
//   disabled: false,
//   resizable: false,
//   placeholder: '',
// })

// const emit = defineEmits<{
//   (event: 'update:value', payload: string): void
//   (event: 'focus', payload: FocusEvent): void
//   (event: 'blur', payload: FocusEvent): void
// }>()

// const handleInput = (e: Event) => {
//   emit('update:value', (e.target as HTMLInputElement).value)
// }

// const textareaRef = ref<HTMLTextAreaElement>()
// const focus = () => {
//   if (textareaRef.value) textareaRef.value.focus()
// }

// defineExpose({
//   focus,
// })
</script>

<style lang="less" scoped>
.textarea {
  outline: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 10px;
  transition: border-color 0.25s;
  box-sizing: border-box;
  line-height: 1.675;
  resize: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  &:focus {
    border-color: #d14424;
    background-color: #fff;
  }

  &.resizable {
    resize: vertical;
  }

  &.disabled {
    background-color: #f5f5f5;
    border-color: #dcdcdc;
    color: #b7b7b7;
  }

  &::placeholder {
    color: #bfbfbf;
  }
}
.textarea::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  background-color: transparent !important;
}
.textarea::-webkit-scrollbar-thumb {
  background-color: #c1c1c1 !important;
}
</style>
